<script setup lang="ts">
import type { Props } from './utils/types.d.ts'

defineOptions({
    name: 'KeywordTitle'
})

const $slot = useSlots()

withDefaults(defineProps<Props>(), {
    title: '标题'
})

</script>

<template>
    <div class="keyword-title">
        <span v-if="!$slot.title">{{ title }}</span>
        <slot name="title"></slot>
    </div>
</template>

<style lang="scss" scoped>
.keyword-title {
    display: flex;
    align-items: center;
    font-family: 'SOURCEHANSANSCN-REGULAR';

    &::before {
        content: '';
        display: block;
        width: 5px;
        height: 16px;
        border-radius: 3px;
        background-color: var(--primary-color);
    }

    span {
        color: #BBBBBB;
        padding-left: 5px;
        color: rgba(187, 187, 187, 1);
        font-size: 16px;
    }
}
</style>
